<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是用户端</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <style>
        .message-right {
            text-align: right;
            margin-bottom: 10px;
            /* 根据需要自定义样式 */
        }
        .message-right .content {
            background-color: seagreen
        }
        .message-left {
             text-align: left;
             margin-bottom: 10px;
             /* 根据需要自定义样式 */
         }
        .time {
            font-weight: bold; /* 时间戳加粗 */
            color: #666; /* 时间戳颜色 */
            font-size: 12px; /* 时间戳字体大小 */
            margin-bottom: 4px; /* 时间戳与内容之间的间距 */
        }

        .content {
            background-color: #f0f0f0; /* 内容背景色 */
            padding: 8px; /* 内容内边距 */
            border-radius: 6px; /* 内容边框圆角 */
            display: inline-block; /* 内容显示为块级元素 */
            max-width: 80%; /* 内容最大宽度，防止过宽 */
            word-wrap: break-word; /* 长单词换行 */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 内容阴影 */
        }

        /* 设置全屏高度 */
        html, body {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif; /* 使用你喜欢的字体 */
        }

        /* 整体聊天容器 */
        .chat-container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        /* 聊天消息显示区域 */
        .chat-messages {
            flex: 1; /* 自动扩展填满剩余空间 */
            overflow-y: auto; /* 滚动条 */
            padding: 10px;
            background-color: #f2f2f2;
        }

        /* 发送消息输入框和按钮区域 */
        .send-message {
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 10px;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); /* 底部阴影效果 */
        }

        /* 输入框样式 */
        .message-input {
            flex: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        /* 发送按钮样式 */
        .send-button {
            padding: 8px 16px;
            margin-left: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
    </style>
</head>
<body>

<div class="chat-container" id="app">
    <div class="chat-messages">
        <!-- 这里是聊天消息显示区域，用于显示历史消息 -->
        <!-- 可以通过 JavaScript 动态添加消息 -->

        <div v-for="(message, msgIndex) in messages"
             :class="{ 'message-right': isAdminMessage(message), 'message-left': !isAdminMessage(message)}">
            <span class="time">{{ message.time }}</span> <br>
            <span class="content">{{formatMessageContent(message.content)}}</span>
        </div>
    </div>

    <div class="send-message">
        <input type="text" class="message-input" v-model="newMessage" placeholder="请输入消息...">
        <button class="send-button" @click="setMessage">发送</button>
    </div>
</div>
<!-- <input v-model="usermessage" style="width: 80%;">
<button @click="setMessage">用户发通知</button> -->

<script>
    const app = new Vue({
        el: '#app',
        data: {
            messages: [],
            protocol: '',
            host: '',
            endpoint: 0,
            contextPath: '',
            newMessage: "",
        },
        methods: {
            //判断消息是否为管理员发的
            isAdminMessage(message) {
                return !message.content.startsWith('admin:');
            },
            formatMessageContent(content) {
                // 格式化消息内容的方法
                if (content.startsWith('a:')) {
                    return content.substr('a:'.length); // 去掉开头的 "admin:" 部分，直接返回冒号后面的内容
                } else {
                    return "客服:" + content.substr('admin:'.length);
                }
            },
            setMessage() {
                if (this.newMessage.trim() !== '') {
                    var params = new URLSearchParams();

                    params.append("content", this.newMessage);
                    axios.post('../userservletinfo.action?op=setMassage', params).then(result => {
                        if (result.data.code == 1) {
                            this.messages = result.data.obj;
                            this.newMessage = "";
                        } else {
                            alert("发送失败");
                        }
                    });
                }
            },
            // 获取协议参数
            getServletInfo() {
                axios.post('../userservletinfo.action?op=getServerInfo').then(result => {
                    if (result.data.code == 1) {
                        // 返回参数后，初始化参数
                        this.protocol = result.data.obj.protocol;
                        this.host = result.data.obj.host;
                        this.endpoint = result.data.obj.port;
                        this.contextPath = result.data.obj.contextPath;
                        this.initWebSocket();
                    }
                });
            },
            //初始化参数
            initWebSocket() {
                // 获取当前页面的协议、主机和端口
                //const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
                const protocol = this.protocol;

                //const host = window.location.host;
                const host = this.host;
                //考虑nginx反向代理没有端口的问题
                //const host = window.location.host.includes(':') ? window.location.host : window.location.host + ':8080';

                //const endpoint = '/shop_war/echo';
                const endpoint = this.endpoint + this.contextPath + '/echo';
                //const endpoint = '/shop/echo';

                // 动态生成 WebSocket 的 URL
                const wsUrl = `${protocol}://${host}:${endpoint}`;

                // 创建 WebSocket 连接
                var ws = new WebSocket(wsUrl);

                ws.onopen = function () {
                    console.log('WebSocket 连接已经建立。');
                    // ws.send('Hello, server!');
                };

                ws.onmessage = function (event) {
                    console.log('收到服务器消息：', event.data);
                    // alert("收到服务器消息：" + event.data);
                    //该刷新了
                    app.initChatContent();
                }

                ws.onerror = function (event) {
                    console.error('WebSocket 连接出现错误：', event);
                };

                ws.onclose = function () {
                    console.log('WebSocket 连接已经关闭。');
                };

                window.onbeforeunload = function () {
                    app.$data.ws.close();
                };

                this.ws = ws;
            },
            //初始化聊天内容并渲染
            initChatContent() {
                axios.post('../userservletinfo.action?op=initChatContent').then(result => {
                    if (result.data.code == 1) {
                        // 返回参数后，初始化参数
                        console.log(result.data.obj);
                        this.messages = result.data.obj;
                    }
                });
            }
        },
        mounted() {
            //获取初始化servelt参数并调用方法初始化连接
            this.getServletInfo();
            this.initChatContent();
        }
    })
</script>
</body>
</html>